import React, { Component } from 'react';
import './hHeader.css';
import {Icon,Input } from 'antd';
import {withRouter} from 'react-router-dom';
const Search = Input.Search;
 
class Headerhome extends Component {
    constructor(props){
        super(props);
     this.state = {
        searchVal:'',
        seleCitys:'成都'
     };
    }

    onSearchhandel = (value)=>{
       this.setState({
        searchVal:value
       },function(){
        console.log(value,this.state.searchVal)
       })
       //注意setState方法是异步的,解决办法(1)使用setState后面的回调函数,(2)使用更新生命周期componentDidUpdate
       //console.log(value,this.state.searchVal)
    };
    goSelectedCity = () => {
        this.props.history.push('/City');
    } 

    render () {
        
        return (
            <div className="header">
                  <div className="left-back">
                     <Icon type="left" style={{fontSize:20,color:'#fff'}}/>
                  </div>
                  <Search
                    onSearch={this.onSearchhandel}
                    style={{ width: 290 }}
                    />
                  <div className="right-location" onClick={this.goSelectedCity.bind(this)}>
                    {this.state.seleCitys}
                    <Icon type="caret-down" />
                  </div>
               </div>
        )
    }
}
export default withRouter(Headerhome);